<script lang="ts" setup>
import { reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { dicFormat } from '@/utils'
import QuickCrud from '@/components/QuickCrud/index.vue'
import { Column, Actionbar, Toolbar } from '@/types/table'
import { Order, SearchOrder } from '@/types/qqOrder'
import { FormItem } from '@/types/form'
import { Page } from '@/types/page'
import { Options } from '@/types/options'
import { useOrderStore } from '@/store/modules/qqOrder'
import {
  addOrder,
  updateOrder,
  deleteOrder,
  batchDeleteOrder,
  excuteOrder,
  batchExcuteOrder,
} from '@/api/qqOrder'

const orderStore = useOrderStore()
const keywordList = reactive<Array<Options>>([])
const dataList = reactive<Array<Order>>([])
/**
 * 表单
 */
// TODO:订单表单校验
const dialogTitle = reactive({
  add: '创建订单',
  edit: '编辑订单',
  detail: '订单详情',
})
const formModel = reactive<Order>({
  id: '',
  orderId: '',
  keyword: '',
  content: '',
  remark: '',
})
const formItems = reactive<Array<FormItem>>([
  {
    label: '订单编号',
    labelWidth: '80px',
    vModel: 'orderId',
    editReadonly: true,
    placeholder: '订单编号',
    prop: 'orderId',
    rules: [
      {
        required: true,
        message: '订单编号不能为空',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '关键字',
    labelWidth: '80px',
    vModel: 'keyword',
    placeholder: '关键字',
    prop: 'keyword',
    type: 'select',
    options: keywordList,
    rules: [
      {
        required: true,
        message: '请选择',
        trigger: 'change',
      },
    ],
  },
  {
    label: '内容',
    labelWidth: '80px',
    vModel: 'content',
    placeholder: '内容',
    type: 'textarea',
    editHidden: true,
    prop: 'content',
    rules: [
      {
        required: true,
        message: '内容不能为空',
        trigger: 'blur',
      },
    ],
  },
  {
    label: '备注',
    labelWidth: '80px',
    vModel: 'remark',
    placeholder: '备注',
    type: 'textarea',
  },
])
const handleFormSubmit = (form: Order, done: any) => {
  console.log('handleFormSubmit', form)
  if (form.id) {
    updateOrder(form).then(() => {
      ElMessage({
        type: 'success',
        message: '订单修改成功',
      })
      done()
    })
  } else {
    addOrder(form).then(() => {
      ElMessage({
        type: 'success',
        message: '订单创建成功',
      })
      done()
    })
  }
}
/**
 * 搜索
 */
const searchForm = reactive<SearchOrder>({
  orderId: '',
  keyword: '',
  content: '',
  status: '',
})
const searchFormItems = reactive<Array<FormItem>>([
  {
    label: '订单编号',
    vModel: 'orderId',
    placeholder: '订单编号',
  },
  {
    label: '关键字',
    vModel: 'keyword',
    type: 'select',
    options: keywordList,
    placeholder: '关键字',
  },
  {
    label: '状态',
    vModel: 'status',
    type: 'select',
    options: [
      {
        label: '未处理',
        value: '0',
      },
      {
        label: '已处理',
        value: '1',
      },
    ],
    placeholder: '状态',
  },
])
/**
 * 工具栏
 */
const handleBatchDelete = (data: any, done: any) => {
  const { ids } = data
  ElMessageBox.confirm(`你真的删除选择的订单吗？`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    batchDeleteOrder(ids).then(() => {
      ElMessage({
        type: 'success',
        message: '订单删除成功',
      })
      done()
    })
  })
}
const handleBatchExcute = (data: any, done: any) => {
  const { ids } = data
  ElMessageBox.confirm(`你真的处理选择的订单吗？`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    batchExcuteOrder(ids).then(() => {
      ElMessage({
        type: 'success',
        message: '订单处理成功',
      })
      done()
    })
  })
}
const tableToolbar = reactive<Toolbar>({
  hiddenImportButton: true,
  hiddenExportButton: true,
  hiddenPrintButton: true,
  btns: [
    {
      name: '批量处理',
      click(data: any, done: any) {
        handleBatchExcute(data, done)
      },
    },
  ],
})
/**
 * 表格
 */
const tableColumns = reactive<Array<Column>>([
  {
    width: '50',
    type: 'selection',
    align: 'center',
  },
  {
    label: '下单时间',
    prop: 'createTime',
    width: '180',
    align: 'center',
  },
  {
    label: '状态',
    prop: 'status',
    width: '100',
    align: 'center',
    format: (row: Order) => {
      return row.status === 1 ? '已处理' : '未处理'
    },
  },
  {
    label: '编号',
    prop: 'id',
    width: '100',
    align: 'center',
  },
  {
    label: '订单编号',
    prop: 'orderId',
    width: '200',
    align: 'center',
  },
  {
    label: '关键字',
    prop: 'keyword',
    width: '100',
    align: 'center',
  },
  {
    label: '订单消息',
    prop: 'content',
    width: '200',
    align: 'center',
    format: (row: Order) => {
      const obj = JSON.parse(row.content)
      return obj && obj.raw_message
    },
  },
  {
    label: '我的QQ',
    prop: 'content',
    width: '200',
    align: 'center',
    slot: true,
    type: 'link',
    format: (row: Order) => {
      const obj = JSON.parse(row.content)
      return obj && obj.self_id
    },
  },
  {
    label: 'QQ群号',
    prop: 'content',
    width: '100',
    align: 'center',
    format: (row: Order) => {
      const obj = JSON.parse(row.content)
      return obj && obj.group_id
    },
  },
  {
    label: 'QQ群名称',
    prop: 'content',
    width: '200',
    align: 'center',
    format: (row: Order) => {
      const obj = JSON.parse(row.content)
      return obj && obj.group_name
    },
  },
  {
    label: 'QQ号',
    prop: 'content',
    width: '200',
    align: 'center',
    slot: true,
    type: 'link',
    format: (row: Order) => {
      const obj = JSON.parse(row.content)
      return obj && obj.sender && obj.sender.user_id
    },
  },
  {
    label: 'QQ昵称',
    prop: 'content',
    width: '100',
    align: 'center',
    format: (row: Order) => {
      const obj = JSON.parse(row.content)
      return obj && obj.sender && obj.sender.nickname
    },
  },
  {
    label: '内容',
    prop: 'content',
    width: '200',
  },
  {
    label: '备注',
    prop: 'remark',
  },
])
const handleDelete = (item: Order, done: any) => {
  ElMessageBox.confirm(`你真的删除【${item.orderId}】的订单吗？`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteOrder(item.id).then(() => {
      ElMessage({
        type: 'success',
        message: '订单删除成功',
      })
      done()
    })
  })
}
const handleExcute = (item: Order, done: any) => {
  ElMessageBox.confirm(`你真的处理【${item.orderId}】的订单吗？`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    excuteOrder(item.id).then(() => {
      ElMessage({
        type: 'success',
        message: '订单处理成功',
      })
      done()
    })
  })
}
const tableActionbar = reactive<Actionbar>({
  width: 200,
  btns: [
    {
      name: '处理',
      position: 'left',
      click(item: any, done: any) {
        handleExcute(item, done)
      },
      render(row: any) {
        return !(row.status === 1)
      },
    },
  ],
})
/**
 * 分页
 */
const page = reactive<Page>({
  current: 1,
  size: 10,
  sizes: [10, 20, 30, 40, 50],
  total: 100,
})
/**
 * 下拉框数据、字典数据、级联数据及分类数据等函数都在此定义
 */
const getKeywordList = (dicTypeId: string) => {
  orderStore.getDictionaryList(dicTypeId).then(() => {
    const { dictionaryList } = orderStore.$state
    const list = dicFormat(dictionaryList, {
      label: 'name',
      value: 'name',
    })
    keywordList.length = 0
    keywordList.push(...list)
  })
}
/**
 * 函数
 */
const loadSelectData = () => {
  // 下拉框数据、字典数据、级联数据及分类数据等函数都在此函数中调用
  getKeywordList('keyword')
}
const load = (parmas: object) => {
  loadSelectData()
  orderStore.getOrderPageList(parmas).then((res: any) => {
    const { page: pagination } = res
    const { orderList } = orderStore.$state
    if (orderList) {
      dataList.length = 0
      dataList.push(...orderList)
    }
    if (pagination) {
      page.total = pagination.total
    }
  })
}
</script>
<template>
  <quick-crud
    :dialog-title="dialogTitle"
    :form-model="formModel"
    :form-items="formItems"
    :table-data="dataList"
    :table-columns="tableColumns"
    :table-actionbar="tableActionbar"
    :table-toolbar="tableToolbar"
    :search-form-items="searchFormItems"
    :search-form-model="searchForm"
    dialog-titles="dialogTitles"
    :page="page"
    @on-load="load"
    @on-form-submit="handleFormSubmit"
    @on-delete="handleDelete"
    @on-batch-delete="handleBatchDelete"
  ></quick-crud>
</template>
